<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery.formAutoFill.js - Showcase</title>	
		<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
		<script type="text/javascript" src="js/jquery.formAutoFill.js"></script>

		<script type="text/javascript">
			$(function() {
				$('input.required').addLoremIpsum('Lorem Ipsum');
				$('input.email').addLoremIpsum('testme@example.invalid');
				$('textarea.required').addLoremIpsum('Lorem ipsum dolor sit amet, consectetuer sadipscing elitr.');
				$('#pizza-eggs').addLoremIpsum(true);
				$('[name=required-select]').addLoremIpsum(2);
				$('[name=required-select-multiple]').addLoremIpsum([1,5,10]);
			});
		</script>
	</head>
	<body>
		<form id="TestForm" method="post" action="#">
			<p>
				<label for="non-required-field">non required <input type="text" name="non-required-field" value="" /></label>
			</p>
			<p>
				<label for="required-field">required * <input type="text" name="required-field" value="" class="required" /></label>
			</p>
			<p>
				<label for="email-field">E-Mail * <input type="text" name="email-field" value="" class="email" /></label>
			</p>
			
			<p>
				<label for="required-checkbox">You must agree with this! <input type="checkbox" class="required" name="required-checkbox" value="yes" />
			</p>

			<p>
				<span>A pizza has got to have at least:</span>
				<ul>
					<li><input type="radio" id="pizza-tomato" name="required-radio" value="tomato" /><label for="pizza-tomato">Tomato</label></li>
					<li><input type="radio" id="pizza-cheese" name="required-radio" value="cheese" /><label for="pizza-cheese">Cheese</label></li>
					<li><input type="radio" id="pizza-eggs" name="required-radio" value="eggs" /><label for="pizza-eggs">Eggs</label></li>
				</ul>
			<p>

			<p>
				<label for="required-select">Select one:</label>
				<select name="required-select">
					<option value="">----</option>
					<option value="1">one</option>
					<option value="2">two</option>
					<option value="1000">thousand</option>
				</select>
			</p>

			<p>
				<label for="required-select-multiple">Select more:</label>
				<select name="required-select-multiple" size="5" multiple="multiple">
					<option value="1">one</option>
					<option value="2">two</option>
					<option value="5">five</option>
					<option value="10">ten</option>
					<option value="100">hundred</option>
					<option value="1000">thousand</option>
				</select>

			</p>

			<p>
				<label for="message">Message:</label>
				<div>
					<textarea class="required"></textarea>
				</div>
			</p>

			<input type="hidden" name="hidden-value" value="i-am-hidden" />
			<p>
				<input type="submit" /> <input type="reset" />
			</p>		
		</form>
	
		<a id="formLorem" href="#">formLorem!</a>
	</body>
</html>
